{% extends 'dase1.html'%}

{% block contennt1 %}
<div class="cl-cantainer container">
    <div class="row">
        <div class="col-md-9 cl-left">
            <div class="cl-artical-content">
                    <h2 class="cl-artical-title">{{ article.tags }}</h2>
                    <div class="cl-card-tag">
                        <div><span>{{ article.total_views }}</span>人浏览 / <span>{{ article.comments_count}}</span>人评论<span>{{ article.cerate_time }}</span></div>
                    </div>
                    <div class="cl-artical">
                        {{ article.content | safe }}
                    </div>
            </div>
            <div class="recommend-panel">
                <h4 class="right-card-title">相关文章</h4>
                    <div class="card-deck">
                        {% for article in art %}
                            <div class="card ll-panel">
                                <a class="recommend-panel-link" href="{% url 'home:details' %}?artid={{article.id}}">
                                    <div class="recommend-panel-top">
                                        <img src="{{ article.avatar.url }}" class="img-fluid" alt="">
                                    </div>
                                    <div class="recommend-panel-bottom">
                                        {{ article.tags }}
                                    </div>
                                </a>
                            </div>
                         {% endfor %}
                    </div>
            </div>
            <div class="comment">
                <form class="cl-comment-from" method="post">
                    {% csrf_token%}
                    <input type="hidden" name="art_id"  value="{{ article.id }}">
                    <div><textarea placeholder="说点什么吧..." rows="5" name="content"></textarea></div>
                    <button type="submit">留言</button>
                    <span class="clearfix"></span>
                </form>
                <h4 class="right-card-title">全部评论</h4>
                     {% for comm in comms %}
                         <div class="comment-panel-portrait">
                             <img src="{{ comm.user.avatar.url }}" class="img-fluid rounded-circle" alt="">
                         </div>
                         <div class="comment-panel-content">
                             <div class="comment-panel-content-item">
                                 <div class="comment-author">{{ comm.user.username}}</div>
                                 <div>{{ comm.created_time}}</div>
                             </div>
                             <div class="comment-panel-content-main">{{ comm.content}}</div>
                         </div>
                         <span class="clearfix"></span>
                              <div class="text-primary"><a href="">回复</a>
                              </div>
                    {%endfor%}
            </div>
        </div>

        <div class="col-md-3 cl-right">
                <div class="right-card">
                    <div class="right-card-main">
                         <div class="right-card-title">故事推荐</div>
                    <div class="cl-code">
                        <img src="../static/img/img.png" class="img-fluid" alt="">
                            <p>关注作者获取更多模板信息，定时发布干货文章</p>
                        </div>
                    </div>
                </div>
                <div class="right-card">
                <div class="right-card-main">
                    <div class="right-card-title">最新文章</div>
                        <div class="right-recommended"><a href="#"><img src="../static/img/v2-c32824ac8a792f084e9ca7a9b6345932_r.jpg" class="img-fluid" alt=""></a></div>
                            <ul class="right-recommended-list">
                                <li><a href="/?=article{{ article.id }}"><i class="fa fa-angle-right" aria-hidden="true"></i>{{ article.tags }}</a></li>
                            </ul>
                    </div>
                </div>
                <div class="right-card">
                    <div class="right-card-main">
                        <div class="right-card-title">热门标签</div>
                        <ul class="label">
                            <li><a href="#">战争</a></li>
                            <li><a href="#">文化</a></li>
                            <li><a href="#">其他</a></li>
                        </ul>
                    </div>
               </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}